<template>
	<view class="organization">
		<view class="organization-header ff-bg-blue"></view>
		<view class="organization-header-content ff-bg-fff ff-margin-15 ff-flex-between ff-border-radius-15">
			<view class="organization-header-content-left">
				<view class="ff-font-16 ff-font-weight-600 ff-line-height-1-3">{{ organizationDetails.orgName }}</view>
				<view class="ff-flex">
					<view class="ff-font-13 organization-header-content-left-fraction ff-flex">
						<view class="ff-color-fff">
							{{ organizationDetails.registerNum !== null ? organizationDetails.registerNum : 0 }}
						</view>
						一消证书
					</view>
					<view class="ff-font-13 ff-margin-left-10 organization-header-content-left-fraction ff-flex">
						<view class="ff-color-fff">
							{{ organizationDetails.operatorNum !== null ? organizationDetails.operatorNum : 0 }}
						</view>
						操作员证书
					</view>
				</view>
				<view class="ff-flex ff-font-12 ff-color-gray-one organization-header-content-left-address">
					<view class="ff-align-items-one">
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
							mode=""></image>
						<view class="ff-margin-left-3 ff-line-height-1-3">
							距离您{{ nearest / 1000 || 0 }}km |
							{{ organizationDetails.orgAddr }}
						</view>
					</view>
				</view>
			</view>
			<view class="organization-header-content-right">
				<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
					mode="">
				</image>
			</view>
		</view>
		<view class="organization-certificate ff-margin-15 ff-bg-fff ff-padding-15 ff-border-radius-15">
			<image class="organization-certificate-img"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/certificate.png" mode="">
			</image>
			<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-30">从业资格证</view>
			<view class="ff-flex ff-flex-wrap">
				<view class="organization-certificate-box ff-margin-bottom-20"
					v-for="(item, index) of organizationDetails.orgMacros" :key="index">
					<view class="ff-font-26 ff-font-weight-600 ff-margin-bottom-15">
						{{ item.macroNum }}
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-certificate-num.png"
							mode=""></image>
					</view>
					<view class="ff-font-13 ff-line-height-1-3">{{ item.macroName }}</view>
				</view>
			</view>
		</view>
		<view class="organization-but"><u-button type="primary" @click="makeCall">联系该机构</u-button></view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'homeDetails',
		data() {
			return {
				nearest: '', // 距离
				organizationDetails: {} // 服务机构详情页
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			this.nearest = e.nearest
			this.getOrganizationDetails(e.id);
		},
		methods: {
			// 获取服务机构详情页数据
			getOrganizationDetails(id) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				this.$http
					.get({
						url: `/serviceOrg/detail/${id}`
					})
					.then(res => {
						// console.log('服务机构详情页数据-----', res);
						if (res.code == 200) {
							this.organizationDetails = res.data;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 给该机构拨打电话
			makeCall() {
				if (!this.organizationDetails.orgPhone) {
					this.$refs.uToast.show({
						title: '当前无机构电话信息!',
						type: 'error'
					});
					return;
				}
				uni.makePhoneCall({
					phoneNumber: this.organizationDetails.orgPhone
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.organization {
		&-header {
			height: 220rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
		}

		&-header-content {
			align-items: center;
			padding: 36rpx 20rpx 36rpx 30rpx;
			margin-top: -120rpx;

			.ff-font-weight-600 {
				max-width: 460rpx;
			}

			&-left {
				&-fraction {
					margin: 20rpx 20rpx 20rpx 0;
					align-items: center;
					color: #e7624b;

					view {
						background-color: #e7624b;
						padding: 4rpx 14rpx;
						border-top-left-radius: 15rpx;
						border-bottom-left-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						margin-right: 8rpx;
					}
				}

				&-address {
					.ff-align-items-one {
						image {
							width: 30rpx;
							height: 30rpx;
							margin-top: -5rpx;
						}
					}

					.ff-margin-left-3 {
						margin-left: 4rpx;
						max-width: 460rpx;
					}
				}
			}

			&-right {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		&-certificate {
			position: relative;
			padding-bottom: 0;
			padding-top: 40rpx;

			&-img {
				position: absolute;
				right: 0;
				top: 0;
				width: 195rpx;
				height: 192rpx;
			}

			&-box {
				width: 33.2%;
				padding: 0 4%;
				z-index: 12;

				.ff-font-16,
				.ff-font-26 {
					color: #0b0e11;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 0 0 -8rpx 3rpx;
				}
			}
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}
</style>